/**
 * Render Props
 */
// https://zhuanlan.zhihu.com/p/141195214
import React, { useState } from 'react';

export const Toggle = props => {
  const [on, setOn] = useState(false);
  const toggle = () => setOn(prev => !prev);
  const { Render } = props;
  return (
    <div>
      {Render({
        on,
        toggle,
      })}
      <Render on={on} toggle={toggle} />
    </div>
  );
};

export default props => {
  return (
    <div>
      <Toggle
        Render={({ on, toggle }) => (
          <div>
            {on && <nav>Nav</nav>}
            <div onClick={toggle}>click me</div>
          </div>
        )}
      />
    </div>
  );
};
